<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="com.rui1024.pojo.Menu" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<script src="./js/jquery-3.6.0.min.js"></script>

<link href="./css/bootstrap.css" rel="stylesheet">
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

	<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title>点餐</title>
<link rel="stylesheet" href="css/css4.css">
	<style type="text/css">
		table{
			width: 70%;
		}
	</style>
</head>

<body>
	<div class="back-float">
		<button><a href="usermain.jsp">返回</a></button>
	</div>

	<div id="root">

		<div class="header">
			<div class="mingzi">老八蜜汁美食菜单</div>
		</div>

		<div class="container">
			<div class="body">
				<div class="block">
					<table class="table table-bordered" style="width:70%">
						<tr>
							<td>价格</td>
							<td>菜名</td>
							<td>厨师</td>
							<td>操作</td>
						</tr>
						<c:forEach items="${menu}" var="m">
							<tr>
								<td>${m.getPrice()}元</td>
								<td>${m.getName()}</td>
								<td>${m.getChef()}</td>
								<td><button class="order btn btn-primary btn-sm"
										value="${m.getId()}">点餐</button></td>
							</tr>
						</c:forEach>
					</table>
					<div class="list-group" style="width: 250px">
						<a href="#" class="list-group-item active">
							<h4 class="list-group-item-heading" >目前订单总额：${listTotalSum}&nbsp;元</h4>
						</a>
						<button type="button" class="btn btn-default btn-lg">
							<span class="glyphicon glyphicon-yen" aria-hidden="true"></span> 二维码付款
						</button>
					</div>
					<div class="row">
						<div class="col-xs-6 col-md-3">

							<a href="#" class="thumbnail">
								<img src="${pageContext.request.contextPath}/img/2wei.png" alt="...">
							</a>
						</div>
					</div>

				</div>
			</div>
		</div>

	</div>


	<div class="modal fade" id="submitModal" tabindex="-1" role="dialog"
		aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">输入数量</h5>
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body form-group">
					<div>
						<label for="orderAmount">输入订餐的数量</label> <input id="orderAmount"
							type="number" class="form-control">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary"
						data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary submit-order">提交</button>
				</div>
			</div>
		</div>
	</div>

	<script src="./js/bootstrap.js"></script>

	<script>
		var selectedMenu = -1;
		$(document).ready(function() {
			$("#back").click(function() {
				console.log("jump");
				$(location).attr("href", "LoginServlet");
			})
			$(".order").click(function() {
				// console.log($(this).val());
				selectedMenu = $(this).val();
				$("#submitModal").modal("show");
			})
			$(".submit-order").click(function() {
				$("#submitModal").modal('toggle');
				order(selectedMenu, $("#orderAmount").val());
			})
		});

		function order(id, amount) {
			$.ajax({
				type : "POST",
				url : "OrderServlet",
				data : {
					amount : amount,
					menuId : id
				},
				success : function() {
					selectedMenu = -1;
					alert("提交成功");
				},
				error : function(data) {
					selectedMenu = -1;
					alert("data");
				}
			})
		}
	</script>
</body>
</html>
